<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="../js/vue.js"></script>
  <link rel="stylesheet" href="css/cart.css">
</head>
<body>
  <div id="div1">
    <div class="container">
      <my-cart></my-cart>
    </div>
  </div>

  <script type="text/javascript">
    
    const CartTitle = {
        props: ['username_cart'],
        template: `
            <div class="title">{{username_cart}}</div>
        `
    }

    const CartList = {
      template: `
        <div>
          <div class="item">
            <img src="img/a.jpg"/>
            <div class="name">电视机</div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="img/b.jpg"/>
            <div class="name">机顶盒</div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="img/c.jpg"/>
            <div class="name">冰箱</div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="img/d.jpg"/>
            <div class="name">手机</div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="img/e.jpg"/>
            <div class="name">电视机</div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
        </div>
      `
    }

    const CartTotal = {
        props: ['list'],
        template: `
            <div class="total">
            <span>总价：{{sum_total}}</span>
            <button>结算</button>
            </div>
        `,
        computed: {
            sum_total: function() {
                // 计算商品的总价
                let sumTotal = 0;
                this.list.forEach(item => {
                    sumTotal += item.price * item.num;
                });
                return sumTotal;
            }
        }
    }
    
    //定义购物车组件
    Vue.component('my-cart', {
     data: function() {
         return {
            username_cart: '张三的购物车',
            list: [{
                id: 1,
                name: 'TCL彩电',
                price: 100,
                num: 1,
                img: 'img/a.jpg'
                },{
                id: 2,
                name: '机顶盒',
                price: 1000,
                num: 1,
                img: 'img/b.jpg'
                },{
                id: 3,
                name: '海尔冰箱',
                price: 1000,
                num: 1,
                img: 'img/c.jpg'
                },{
                id: 4,
                name: '小米手机',
                price: 2000,
                num: 1,
                img: 'img/d.jpg'
                },{
                id: 5,
                name: 'PPTV电视',
                price: 2000,
                num: 2,
                img: 'img/e.jpg'
            }]
         }
         
     },
      template: `
        <div class='cart'>
          <cart-title :username_cart='username_cart' ></cart-title>
<!--          用于动态地绑定一个属性或 prop 到表达式。在这里，它告诉 Vue 将父组件中的 username_cart
          数据或计算属性的值绑定到 CartTitle 组件的 username_cart prop 上。-->
          <cart-list></cart-list>
          <cart-total :list='list' ></cart-total>
        </div>
      `,
      components: {        /*components 对象是用来注册局部组件的。局部组件只能在当前的 Vue 实例或组件中使用。*/
        'cart-title': CartTitle,
        'cart-list': CartList,
        'cart-total': CartTotal
      }
    });

    var vm = new Vue({
      el: '#div1',
      data: {

      }
    });

  </script>
</body>
</html>